<template>
  <div class="card-title-wrapper">
    <span class="title-text">{{ cardTitle }}（{{ count }}）</span>
    <el-button @click="handleLoad" icon="Refresh" circle link></el-button>
  </div>
  <div
    :class="[
      'wrapper',
      'card-wrapper-normal',
      darkMode ? 'card-wrapper-dark' : 'card-wrapper-light',
    ]"
  >
    <el-table
      :data="tableData"
      height="246"
      style="width: 100%"
      size="default"
      @row-click="showDetail"
      :cell-style="{
        padding: '6px 0',
        margin: '0',
        cursor: 'pointer',
        backgroundColor: 'transparent',
      }"
      :header-cell-style="{
        padding: '8px 0',
        margin: '0',
        backgroundColor: 'transparent',
      }"
      :row-style="{ backgroundColor: 'transparent' }"
      :header-row-style="{ backgroundColor: 'transparent' }"
    >
      <el-table-column label="日期" width="60" align="center">
        <template #default="scope">
          <el-tag
            class="mono-space"
            v-if="checkDate(scope.row) == 0"
            type="success"
            >今</el-tag
          >
          <el-tag class="mono-space" v-else-if="checkDate(scope.row) > 0"
            >+{{ checkDate(scope.row) }}</el-tag
          >
          <el-tag class="mono-space" v-else type="info">{{
            checkDate(scope.row)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="级别" width="70" align="center">
        <template #default="scope">
          <el-tag
            :type="
              scope.row.taskGrade == 1
                ? 'success'
                : scope.row.taskGrade == 2
                ? 'warning'
                : scope.row.taskGrade == 3 || scope.row.taskGrade == 0
                ? 'danger'
                : ''
            "
          >
            {{ taskGradeList[scope.row.taskGrade].shortName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="名称 / 呼号" min-width="150">
        <template #default="scope">
          <div class="vertical-align-center">
            <!-- <el-tag class="cell-tag-left"
              :type="scope.row.taskGrade == 1 ? 'success' : (scope.row.taskGrade == 2 ? 'warning' : (scope.row.taskGrade == 3 ? 'danger' : ''))">
              {{
                  taskGradeList[scope.row.taskGrade].shortName
              }}</el-tag> -->
            <span class="task-name">{{ scope.row.flightNumber }}</span>
            <!-- <el-tag class="cell-tag" v-if="scope.row.aircraftType != ''">{{ scope.row.aircraftType }}</el-tag> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column label="起飞 / ETD" min-width="120">
        <template #default="scope">
          <div class="vertical-align-center">
            <span v-if="scope.row.departureAirport == ''">未知</span>
            <span
              v-else
              :class="[
                highlightAirports(scope.row.departureAirport)
                  ? darkMode
                    ? 'highlight-airport-dark'
                    : 'highlight-airport-light'
                  : '',
              ]"
              >{{ scope.row.departureAirport }}</span
            >
            <el-tag class="cell-tag mono-space" v-if="scope.row.ETD != ''"
              >{{ dateFormat("HH:MM", new Date(scope.row.ETD)) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="落地 / ETA" min-width="120">
        <template #default="scope">
          <div class="vertical-align-center">
            <span v-if="scope.row.arrivalAirport == ''">未知</span>
            <span
              v-else
              :class="[
                highlightAirports(scope.row.arrivalAirport)
                  ? darkMode
                    ? 'highlight-airport-dark'
                    : 'highlight-airport-light'
                  : '',
              ]"
              >{{ scope.row.arrivalAirport }}</span
            >
            <el-tag class="cell-tag mono-space" v-if="scope.row.ETA != ''"
              >{{ dateFormat("HH:MM", new Date(scope.row.ETA)) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备降" min-width="60">
        <template #default="scope">
          <span v-if="scope.row.alternateAirport == ''">未知</span>
          <span
            v-else
            :class="[
              highlightAirports(scope.row.alternateAirport)
                ? darkMode
                  ? 'highlight-airport-dark'
                  : 'highlight-airport-light'
                : '',
            ]"
            >{{ scope.row.alternateAirport }}</span
          >
        </template>
      </el-table-column>
      <!-- <el-table-column prop="comments" label="备注" min-width="80">
      </el-table-column> -->
      <!-- <el-table-column label="#" width="50" align="center">
        <template #default="scope">
          <el-button @click="showDetail(scope.row)" link icon="Document"></el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
  <LoadData ref="loadData" />
</template>

<script setup>
import { h, ref, computed, nextTick } from "vue";
import dateFormat from "@/utils/dateFormat.js";
import {
  ElMessage,
  ElMessageBox,
  ElDescriptions,
  ElDescriptionsItem,
} from "element-plus";
import dayjs from "dayjs";

// import load data components
import LoadData from "../LoadData";

// import stores
import useCommonStore from "@/store/common";
import useAvtivityStore from "@/store/activity";

// define stores
const commonStore = useCommonStore();
const activityStore = useAvtivityStore();
const tableData = computed(() => activityStore.impotrantStatus);

// dark mode variable from common store
const darkMode = computed(() => {
  return commonStore.darkMode;
});

// card title
const cardTitle = ref("B / VVIP / VIP 任务");
const count = computed(() => tableData.value.length);

// load data component
const loadData = ref(null);
const loadGeneralData = () => {
  loadData.value.loadGeneralData();
};
function handleLoad() {
  // console.log('loadData.value', loadData.value);
  // console.log('loadData', loadData);
  loadGeneralData();
}

// highlight airport
const concernedMilitaries = [
  "ZUUU",
  "ZUTF",
  "ZUMY",
  "双流",
  "天府",
  "成都",
  "绵阳",
  "太平寺",
  "邛崃",
  "温江",
];
function highlightAirports(airport) {
  for (let i = 0; i < concernedMilitaries.length; i++) {
    if (airport.indexOf(concernedMilitaries[i]) > -1) {
      return true;
    }
  }
  return false;
}

// check date is today
function checkDate(item) {
  // let today = dayjs();
  // return today.diff(etd, "day");
  let etd = new Date(item.ETD);
  let eta = new Date(item.ETA);
  let now = new Date();
  if (etd.getTime() < now.getTime() && eta.getTime() > now.getTime()) {
    // console.log('item', item.flightNumber);
    // console.log('etd', dateFormat('mm/dd', etd));
    // console.log('eta', dateFormat('mm/dd', eta));
    // console.log('now', dateFormat('mm/dd', now));
    return 0;
  }
  return Math.round((etd.getTime() - now.getTime()) / (24 * 3600 * 1000));
  // return today.diff(etd, "day");
}

// const task grade list
const taskGradeList = [
  { grade: 0, name: "一级任务", shortName: "一级", letterName: "B" },
  { grade: 1, name: "一般要客", shortName: "要客", letterName: "V" },
  { grade: 2, name: "二级任务", shortName: "二级", letterName: "W" },
  { grade: 3, name: "一级任务", shortName: "一级", letterName: "B" },
];

// task source list
const taskSourceList = ["今日计划页", "明日计划页"];

// show details
function showDetail(item) {
  let msg = [];
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "任务", minWidth: "80px" },
      () => item.flightNumber
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "机型", minWidth: "80px" },
      () => item.aircraftType
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "起飞", minWidth: "80px" },
      () => item.departureAirport
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "落地", minWidth: "80px" },
      () => item.arrivalAirport
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "备降", minWidth: "80px" },
      () => item.alternateAirport
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "级别", minWidth: "80px" },
      () => taskGradeList[item.taskGrade].name
    )
  );
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "备注", minWidth: "80px" },
      () => item.comments
    )
  );
  msg.push(
    h(ElDescriptionsItem, { label: "ETD", minWidth: "80px" }, () => item.ETD)
  );
  // msg.push(h(ElDescriptionsItem, { label: 'ATD', minWidth: '80px' }, () => item.ATD));
  msg.push(
    h(ElDescriptionsItem, { label: "ETA", minWidth: "80px" }, () => item.ETA)
  );
  // msg.push(h(ElDescriptionsItem, { label: 'ATA' , minWidth: '80px'}, () => item.ATA));
  msg.push(
    h(
      ElDescriptionsItem,
      { label: "来源", minWidth: "80px" },
      () => taskSourceList[item.day]
    )
  );
  ElMessageBox({
    title: item.flightNumber + " 详情",
    // border: true, size: ''
    message: h(ElDescriptions, { column: 1, border: true }, () => msg),
    draggable: true,
  });
}
</script>

<style scoped>
.wrapper {
  display: inline-block;
  padding: 6px;
  height: 260px;
  /* width: calc(50% - 24px); */
  width: 100%;
  margin-bottom: 24px;
}

.task-name {
  font-size: 18px;
  font-weight: bold;
  /* font-family: "YaHei Consolas Hybrid" */
}

.highlight-airport-light {
  font-weight: bold;
  color: #c45656;
}

.highlight-airport-dark {
  font-weight: bold;
  color: #ebb563;
}
</style>

<style>
.detail-label {
  width: 120px;
  color: red;
}
</style>
